<template>
  <div class="mainContent" v-loading="loading">
    <el-container direction="horizontal" class="width100 height100">
      <el-aside
        :class="{
          hover: hover !== -2,
          barSmall: hide,
          barBig: $route.meta.largeBar,
        }"
        width="none"
        class="asideBg"
      >
        <mainAside
          v-model="hide"
          @refrash="refresh"
          @showprogressBar="showprogressBar"
          @hover="
            (v) => {
              hover = v
            }
          "
        />
      </el-aside>
      <el-container direction="vertical">
        <el-header class="headerBg" height="52px" style="padding: 0;">
          <mainHeader />
        </el-header>
        <el-main class="view-content" style="position: relative;">
          <transition name="slide-bar">
            <div class="topProgress" v-if="showBar"></div>
          </transition>
          <div class="main-content">
            <breadcrumb />
            <el-scrollbar
              class="mainScroll"
              :class="{ fullScroll: $route.meta.full }"
            >
              <transition name="slide-right">
                <keep-alive
                  :exclude="
                    $route.meta && $route.meta.keep ? '' : routerViewName
                  "
                >
                  <router-view
                    v-if="flag"
                    class="inner-content"
                    id="innerRouterBox"
                    ref="routerView"
                  />
                </keep-alive>
              </transition>
            </el-scrollbar>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import mainHeader from '@/components/common/mainHeader'
import mainAside from '@/components/common/mainAside'
import breadcrumb from '@/components/common/breadcrumb'
import { isHasChinese } from '@/assets/js/validate'
export default {
  name: 'mainIndex',
  components: {
    breadcrumb,
    mainHeader,
    mainAside,
  },
  provide() {
    return {
      refresh: this.refresh,
    }
  },
  data() {
    return {
      flag: true,
      loginName: '',
      loading: false,
      showBar: false,
      hover: -2,
      hide: false,
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.login
    },
    dom() {
      return this.$store.state.dom
    },
    routerViewName() {
      let name
      try {
        name = this.$route.matched[1].components.default.name
      } catch (error) {
        name = this.$route.name
      }
      return name
    },
    color() {
      return this.$store.state.color ? this.$store.state.color : 'default'
    },
  },
  watch: {
    'dom.width'() {
      this.setWidth()
    },
    color(v) {
      // console.log(document.body.className)
      this.setColorClass(v)
    },
    hide() {
      setTimeout(() => {
        this.setWidth()
      }, 150)
    },
  },
  methods: {
    refresh() {
      this.flag = false // 通过v-if移除router-view节点
      this.$nextTick(() => {
        this.flag = true // DOM更新后再通过v-if添加router-view节点
      })
    },
    showprogressBar() {
      this.showBar = false // 通过v-if移除router-view节点
      this.$nextTick(() => {
        this.showBar = true // DOM更新后再通过v-if添加router-view节点
      })
    },
    commandMenu(item) {
      if (item == 'loginout') {
        this.$store
          .dispatch('user/logout')
          .then(() => {})
          .catch(() => {})
        this.$router.replace('/login')
      } else {
        this.dialogFormVisible = true
      }
    },
    submitPassWord(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          if (this.$store.getters.loginInfo) {
            let data = {
              //id:'',
              passwordOld: this.form.passwordOld,
              password1: this.form.loginPassword,
              password2: this.form.loginPassword2,
            }
            this.API.user
              .updatePassword(data)
              .then((res) => {
                this.$alertFn.success('修改成功，请重新登录')
                this.dialogFormVisible = false
                this.$store
                  .dispatch('user/logout')
                  .then(() => {})
                  .catch(() => {})
                this.$router.replace('/login')
              })
              .catch((res) => {})
          }
        }
      })
    },
    setLoading(loading) {
      this.loading = loading
    },
    // 页面大小
    setDom(json) {
      this.hide =
        json.width < 1360
          ? this.dom.width > json.width
            ? true
            : this.hide
          : this.dom.width < json.width
          ? false
          : this.hide
      if (!json || typeof json !== 'object') {
        return
      }
      let dom = JSON.parse(JSON.stringify(this.$store.state.dom))
      for (let k in json) {
        dom[k] = json[k]
      }
      this.$store.commit('domFn', dom)
    },
    // 换肤
    setColorClass(v) {
      let arr = document.body.className.split(' ')
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].indexOf('Theme') > -1) {
          arr.splice(i, 1)
          i--
        }
      }
      v ? arr.push(v + 'Theme') : null
      document.body.className = arr.join(' ')
    },
    setWidth() {
      let ref = null
      try {
        ref = this.$refs.routerView.$refs.searchInfo
      } catch (error) {}
      if (!ref) {
        return
      }
      let els = ref.$el.getElementsByClassName('el-form-item__content')
      for (let i = 0; i < els.length; i++) {
        try {
          const parent = els[i]
          const prev = parent.previousSibling
            ? parent.previousSibling.offsetWidth
            : 0
          parent.children[0].style.width =
            parent.parentNode.offsetWidth - prev + 'px'
        } catch (error) {}
      }
    },
  },
  mounted() {
    this.setDom({ width: window.innerWidth, height: window.innerHeight })
    window.onresize = function () {
      this.setDom({ width: window.innerWidth, height: window.innerHeight })
    }.bind(this)
    this.setColorClass(this.color)
  },
  created() {},
}
</script>

<style scoped>
.mainContent {
  width: 100%;
  height: 100%;
  background-size: cover;
  /* padding: 0 42px 15px 42px; */
  box-sizing: border-box;
  background-color: #f0f3fa;
}
.asideBg {
  /* padding: 24px 0; */
  /* padding-top: 2px; */
  /* overflow: visible; */
  z-index: 0;
  width: 240px;
  transition: width 0.15s ease, z-index 0s linear 0.3s;
  box-shadow: 0px 7px 10px 0px rgba(170, 170, 170, 0.8);
  overflow: hidden;
}
.barSmall {
  width: 60px;
  overflow: visible;
}
.barBig {
  width: 300px;
}
.barBig.barSmall {
  width: 180px;
  overflow: visible;
}
/* .asideBg:hover {
  z-index: 9999;
} */
/* .asideBg.hover, */
.barSmall.hover {
  z-index: 1000;
  transition: width 0.15s ease, z-index 0s linear 0s;
}
.headerBg {
  box-shadow: 0px 4px 5px 0px rgba(170, 170, 170, 0.3);
}
.view-content {
  padding: 14px;
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.mainScroll {
  background-size: cover;
  border-radius: 10px;
  height: calc(100% - 56px);
}
.main-content > .mainScroll:only-child {
  height: 100%;
}
.inner-content {
  height: 100%;
  width: 100%;
  /* padding: 20px; */
  box-sizing: border-box;
  /* overflow: auto; */
  border-top: 0;
  /* min-height: 600px; */
}
.login-img {
  border-radius: 50%;
  width: 34px;
  margin-right: 10px;
}
.login-link {
  color: #fff;
}
.login-out-box {
  cursor: pointer;
}
.login-out-box img {
  float: left;
  margin: 0px 8px 0 0;
}
.login-icon {
  font-size: 20px;
  color: #fff;
}
.right-login-info {
  position: relative;
}
.promptIcon {
  margin-right: 10px;
}
.promptNum {
  position: absolute;
  left: 17px;
  top: -4px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 2px;
  box-sizing: border-box;
  text-align: center;
  background: rgba(232, 33, 33, 1);
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
}
.prompt-content {
  position: absolute;
  top: 35px;
  left: -20px;
  background: #fff;
  border-radius: 10px;
  width: 100px;
  line-height: 26px;
  padding: 5px 8px;
  color: #333;
  z-index: 9;
  text-align: left;
  font-size: 14px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
}
.prompt-content:before {
  left: 18px;
  top: -18px;
  content: '';
  width: 10px;
  height: 10px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 9px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
}
.prompt-title-box {
  cursor: pointer;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  /*页面进入动画*/
  transition: all 200ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
}
.slide-right-enter-active >>> .collapse-transition {
  transition: none;
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.topProgress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  border-radius: 10px;
  z-index: 999;
  opacity: 0;
  transition: all 200ms;
}
.slide-bar-enter-active,
.slide-bar-leave-active {
  /*页面进入动画*/
  opacity: 1;
  width: calc(100% - 20px);
  transition: all 500ms;
}
.slide-bar-enter {
  opacity: 1;
  width: 0;
}
.slide-bar-leave-active {
  opacity: 1;
  width: calc(100% - 20px);
}
</style>
<style>
/* mainScroll */
.mainScroll > .el-scrollbar__wrap > .el-scrollbar__view {
  min-width: 1100px;
  padding: 6px 14px 10px;
  box-sizing: border-box;
}
.mainScroll > .el-scrollbar__bar {
  z-index: 111;
}
.fullScroll > .el-scrollbar__wrap > .el-scrollbar__view {
  height: 100%;
}
.loginName .el-dropdown .el-button.el-button--text {
  vertical-align: top;
}
</style>
